<template>
  <div class="box">
    <div class="content">
      <div class="left">
        <img
          src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
          alt=""
        />
      </div>
      <div class="right">
        <h3>访客注册</h3>
        <a-form
          ref="formRef"
          name="custom-validation"
          :model="formState"
          :rules="rules"
          @finish="onFinish"
          :label-col="{ span: 4 }"
        >
          <a-form-item
            label="账户"
            name="name"
            :rules="[{ required: true, message: '输入用户名!' }]"
          >
            <a-input v-model:value="formState.name" style="width: 350px" />
          </a-form-item>
          <a-form-item has-feedback label="密码" name="pass">
            <a-input
              v-model:value="formState.pass"
              type="password"
              style="width: 350px"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item has-feedback label="确认" name="checkPass">
            <a-input
              v-model:value="formState.checkPass"
              type="password"
              style="width: 350px"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" block>注册</a-button>
          </a-form-item>
        </a-form>
        <span @click="handle">Or 去登录</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref,createVNode } from "vue";
import { useRouter } from "vue-router";
import { reg } from "../../api/login";
import { message ,Modal } from 'ant-design-vue';
import type { Rule } from "ant-design-vue/es/form";
import type { FormInstance } from "ant-design-vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export interface FormState {
  name: string;
  pass: string;
  checkPass: string;
}

const formRef = ref<FormInstance>();
let validatePass = async (_rule: Rule, value: string) => {
  if (value === "") {
    return Promise.reject("请输入密码");
  } else {
    if (formState.checkPass !== "") {
      formRef.value?.validateFields("checkPass");
    }
    return Promise.resolve();
  }
};
let validatePass2 = async (_rule: Rule, value: string) => {
  if (value === "") {
    return Promise.reject("请再次输入密码");
  } else if (value !== formState.pass) {
    return Promise.reject("两次密码不一致!");
  } else {
    return Promise.resolve();
  }
};
const rules: Record<string, Rule[]> = {
  pass: [{ required: true, validator: validatePass, trigger: "change" }],
  checkPass: [{ validator: validatePass2, trigger: "change" }],
};
const router = useRouter();
const formState = reactive<FormState>({
  name: "",
  pass: "",
  checkPass: "",
});
const onFinish = async (values: any) => {
  let resp = await reg({ ...values });
  let {code,mess}=resp.data
  if(code){
      message.success(mess);
       Modal.confirm({
        title: '注册成功?',
        icon: createVNode(ExclamationCircleOutlined),
        content: '是否跳转至登录',
        async onOk() {
          try {
            return await new Promise((resolve, reject) => {
              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                 router.push("/login")
            });
          } catch {
            return console.log('Oops errors!');
          }
        },
        // onCancel() {

        // }
      });
  }else{
      message.error(mess);
  }
};
const handle = () => {
  router.push("/login");
};
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: #dddddd;
}
.content {
  width: 950px;
  height: 500px;
  background: white;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}
.left {
  width: 50%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
.right {
  flex: 1;
  padding: 150px 50px;
}
</style>
